/* eslint-disable no-dupe-keys */
/** @type {import('tailwindcss').Config} */
function px2rem(px) {
  return `${px / 16}rem`;
}

/**
 * spacing
 */
function createSpacingRem(max, step = 0.25) {
  const result = {};
  for (let i = step; i <= max; i += step) {
    result[`${i}`] = px2rem(i * 4);
  }
  return result;
}
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        'black-1': '#333',
        'black-2': '#666666',
        'black-3': '#999999'
      },
      spacing: {
        ...createSpacingRem(100)
      }
    }
  },
  plugins: [
    function ({ addUtilities }) {
      const newUtilities = {
        '.safe-top': {
          paddingTop: 'constant(safe-area-inset-top)',
          paddingTop: 'env(safe-area-inset-top)'
        },
        '.safe-left': {
          paddingLeft: 'constant(safe-area-inset-left)',
          paddingLeft: 'env(safe-area-inset-left)'
        },
        '.safe-right': {
          paddingRight: 'constant(safe-area-inset-right)',
          paddingRight: 'env(safe-area-inset-right)'
        },
        '.safe-bottom': {
          paddingBottom: 'constant(safe-area-inset-bottom)',
          paddingBottom: 'env(safe-area-inset-bottom)'
        }
      };
      addUtilities(newUtilities);
    }
  ]
};
